<template>
  <div class="paymentOrder">
    <!-- 头部 -->
    <van-nav-bar
      style="background-color:#f2f2f2"
      title="下单"
      left-text=""
      right-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="orderAddress" @click="showAdderss = true">
      <van-icon name="location-o" size="20" style="margin-right:10px" />
      <div>
        <p class="">{{ changAdderss.name }} {{ changAdderss.tel }}</p>
        <p class="adderss">{{ changAdderss.address }}</p>
      </div>
      <van-icon name="arrow" size="20" />
    </div>
    <van-action-sheet v-model="showAdderss" title="选择收货地址">
      <div class="adderssContent">
        <van-address-list
          v-model="chosenAddressId"
          :list="list"
          default-tag-text="默认"
          @select="select"
          @add="add"
        />
      </div>
    </van-action-sheet>
    <!-- 商品 -->
    <div class="roderInfo">
      <div class="goodsIteminfo" v-for="item in buyGoods" :key="item.cp_id">
        <div class="goodsIteminfoImg">
          <img :src="item.cp_tupian" alt="图片" />
        </div>
        <div class="goodsIteminfoMsg">
          <h5>{{ item.cp_mingcheng }}</h5>
          <p class="tips">{{ item.info }}</p>
          <p class="setPrice">
            <span style="color: #ee0a24">￥{{ item.jiage }}</span>
            <span>数量 x{{ item.cp_shuliang }}</span>
          </p>
        </div>
      </div>
      <van-cell style="margin-top:20px" title="配种方式" value="快递" />
      <van-cell title="运费" value="￥123" />
      <van-field
        v-model="messages"
        rows="1"
        label-width="50px"
        autosize
        label="留言"
        type="textarea"
        placeholder="请输入留言"
      />
      <!-- 金额和下单 -->
      <div class="buyBtnBox">
        <p>
          总金额：<span style="color:#ee0a24">￥{{ totalMoney }}</span>
        </p>
        <van-button type="primary" block @click="buyGoodsFun" :loading="loading">下单支付</van-button>
      </div>
    </div>
    <!-- 配送方式 -->
  </div>
</template>

<script>
import SERVE from "@/axios/index";
export default {
  name: "paymentOrder",
  data() {
    return {
      messages: "", //留言
      buyGoods: [], //要买的商品
      totalMoney: 0, //总价
      showAdderss: false, //显示待选地址
      chosenAddressId: "", //选中地址id
      list: [], //待选地址
      changAdderss: {}, //选中地址
      loading: false, // 下单loading
    };
  },
  mounted() {
    this.$toast.loading({
      mask: true,
      duration: 0,
      message: "加载中...",
    });
    this.getBuyGoods();
    this.getAdderss();
  },
  methods: {
    onClickLeft() {
      this.$router.push("/shoppingCart");
    },
    getBuyGoods() {
      SERVE.getBuyGoods({
        params: {
          uid: window.localStorage.u_id,
          cpids: this.$route.query.ids,
        },
      })
        .then((res) => {
          this.$toast.clear();
          this.buyGoods = res.data;
          for (let item of this.buyGoods) {
            item.info = `库存：${item.cp_kucu}件 | 已销：${item.cp_yixiaoshou}件`;
            this.totalMoney += item.cp_shuliang * item.jiage;
          }
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err", err);
        });
    },
    // 获取地址
    getAdderss() {
      SERVE.getAdderss({
        params: {
          cs_uid: window.localStorage.u_id,
        },
      })
        .then((res) => {
          let resData = res.data;
          if (resData.length === 0) return;
          for (let item of resData) {
            this.list.push({
              id: item.dizhi_id,
              name: item.xingming,
              tel: item.shouji,
              address: `${item.diqu1} ${item.diqu2} ${item.diqu3} ${item.dizhi}`,
              isdefault: item.yn_moren == "1" ? true : false,
            });
          }
          let tempArr = this.list.filter((val) => !val.isdefault);
          this.chosenAddressId =
            tempArr.length === 0 ? this.list[0].id : tempArr[0].id;
          this.changAdderss = this.list.filter(
            (val) => val.id === this.chosenAddressId
          )[0];
        })
        .catch((err) => {
          this.$toast.clear();
          console.log("err", err);
        });
    },
    // 选择地址
    select(item) {
      this.changAdderss = item;
      this.showAdderss = false;
    },
    // 去添加
    add() {
      this.$router.push("/addAdderss");
    },
    //下单
    buyGoodsFun() {
      this.loading = true;
      SERVE.toBuyGoods({
        params: {
          cs_uid: window.localStorage.u_id,
          cpids: this.$route.query.ids,
          cs_dizhiid: this.changAdderss.id,
          cs_liuyan: this.messages,
        },
      })
        .then((res) => {
          this.loading = false;
          this.$notify({
            type: res.data.zt === "yes" ? "success" : "warning",
            message: res.data.xinxi,
          });
          let that = this;
          if (res.data.zt === "yes") {
            setTimeout(() => {
              that.$router.push({ path: "/orders", query: { type: 0 } });
            }, 1000);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log("err", err);
        });
    },
  },
};
</script>

<style></style>
<style lang="scss" scoped>
.paymentOrder {
  .van-action-sheet__content {
    padding-bottom: 50px;
    box-sizing: border-box;
  }
  .van-address-item__edit {
    display: none;
  }
  .van-address-item__value {
    padding-right: 0;
  }
  .van-address-item__address {
    word-break: break-all;
  }
  .adderssContent {
    padding: 15px;
    box-sizing: border-box;
    height: 60vh;
    overflow-y: scroll;
    background-color: #f2f2f2;
  }
  .orderAddress {
    position: relative;
    min-height: 40px;
    width: 100%;
    padding: 8px 15px;
    box-sizing: border-box;
    word-break: break-all;
    display: flex;
    align-items: center;
    .adderss {
      font-size: 14px;
    }
    & > div {
      width: calc(100% - 50px);
    }
    &::after {
      background: repeating-linear-gradient(
        -45deg,
        #ff6c6c 0,
        #ff6c6c 20%,
        transparent 0,
        transparent 25%,
        #1989fa 0,
        #1989fa 45%,
        transparent 0,
        transparent 50%
      );
      background-size: 80px;
      content: "";
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      height: 2px;
    }
  }
  .roderInfo {
    background-color: #f2f2f2;
    // height: calc(100vh - 86px);
    // overflow-y: scroll;
    .goodsIteminfo {
      background-color: #fff;
      min-height: 100px;
      padding: 0 15px;
      box-sizing: border-box;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      word-break: break-all;
      margin-bottom: 1px;
      .goodsIteminfoImg {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .goodsIteminfoMsg {
        width: calc(100% - 90px);
        height: 100%;
        padding: 10px 0;
        box-sizing: border-box;
        h5 {
          margin: 0;
        }
        .tips {
          font-size: 12px;
          margin: 6px 0;
        }
        .setPrice {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .buyBtnBox {
      padding: 0 15px;
      box-sizing: border-box;
      text-align: center;
      margin-bottom: 60px;
      & > p {
        margin: 20px 0;
      }
    }
  }
  /deep/.van-field__label {
    max-width: 90px;
  }
}
</style>
